<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :logoBarData="logoBarData" :advantage="true" :title = "title" @handSearch="logoBarHandSearch"/>
        <category-bar :collapse="false" />
      </div>
    </div>
    <div class="container-width">
      <category-slider-list :categoryId = "categoryId" @handSearch="categoryHandleSearch"/>
      <div class="flex flex-between">
        <breadcrumb :lastName="lastName" class="pad-t-8" />
        <div class="flex v-align-c font-12">
          <span>总共找到</span>
          <span class="font-number pad-l-4 pad-r-4">{{ goodsTotal}}</span>
          <span>个</span>
          <!-- <span class="font-link-red pad-l-4 pad-r-4 " v-if="categoryId">女装</span> -->
          <span>商品</span>
        </div>
      </div>
      <goods-sort-search class="mar-b-20" @handleSearch="goodsHandleSearch" :pageIndex="queryParams.currentPage"
          :totalPage="goodsTotal ? Math.ceil(goodsTotal/queryParams.size) : 1" />
      <div v-loading="customLoading" element-loading-text="加载中" element-loading-background="#f5f5f5"
        class="custom-container">
        <goods-list v-if="goodsTotal > 0" :goodsDataList="goodsData" />
        <!-- 空数据展示 -->
        <none-data v-if="goodsTotal <= 0" />
      </div>
      <div class="flex flex-center pad-t-25 pad-b-25" v-if="goodsTotal > 0">
        <el-pagination class="pagination" @current-change="handleCurrentChange" background layout="prev, pager, next, jumper"
        :total="goodsTotal" :current-page="queryParams.currentPage" :page-size="queryParams.size"/>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import categoryBar from '@/components/categoryBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import rightNavSticky from '@/components/rightNavSticky/index.vue'
  import categorySliderList from '@/components/categorySliderList/index.vue'
  import breadcrumb from '@/components/breadcrumb/index.vue'
  import goodsSortSearch from './components/goodsSortSearch/index.vue'
  import goodsList from './components/goodsList/index.vue'
  import noneData from '@/components/noneData/index.vue'
  import {
    getGoodsListPage
  } from '@/api/goods/goods'
  export default defineComponent({
    name: 'Index',
    components: {
      headerLogin,
      logoBar,
      categoryBar,
      footerLinks,
      footerInfos,
      rightNavSticky,
      categorySliderList,
      breadcrumb,
      goodsSortSearch,
      goodsList,
      noneData
    },
    setup() {
      const router = useRouter()
      const customLoading = ref(false)
      const categoryId = router.currentRoute.value.query.categoryId
      const title = router.currentRoute.value.query.title
      let lastName = ref(router.currentRoute.value.query.categoryName)
      const logoBarData = ref({
        searchTabSwitch: '0'
      })
      let queryParams = ref({
        size: 80,
        currentPage: 1,
        title: '',
        categoryId: '',
        conditionColumn: '',
        sort: '',
        minPrice: '',
        maxPrice: ''
      })
      const goodsTotal = ref(0)
      const goodsData = ref([{
        'goodsId': ''
      }])

      onMounted(() => {
        if (categoryId) {
          queryParams.value.categoryId = categoryId
        }
        if (title) {
          queryParams.value.title = title
        }
        if(!lastName.value) {
          lastName.value = "商品列表"
        }
        // 初始化调用商品列表方法
        initGoodsList()
        logoBarData.value.searchTabSwitch = '2'
      })
      const goNext = () => {
        router.push('/category-list')
      }
      const initGoodsList = () => {
        customLoading.value = true
        getGoodsListPage(queryParams.value).then(response => {
          customLoading.value = false
          if (response.isError) return
          goodsTotal.value = response.data.total
          goodsData.value = response.data.records
        })
      }
      // 搜索框搜索事件
      const logoBarHandSearch = (title:string,tabsIndex:string) => {
        queryParams.value.title = title.value
        initGoodsList()
      }
      // 分类搜索事件
      const categoryHandleSearch = (show:boolean,categoryId:string,categoryName:string) => {
        if (show){
          queryParams.value.categoryId = categoryId
          lastName.value = categoryName
        }else{
          queryParams.value.categoryId = ''
          lastName.value = '商品列表'
        }
        initGoodsList()
      }
      // 商品搜索事件
      const goodsHandleSearch = (sort:string,conditionColumn:string,minPrice:string,maxPrice:string) => {
        queryParams.value.currentPage = 1
        queryParams.value.sort = sort
        queryParams.value.conditionColumn = conditionColumn
        queryParams.value.minPrice = minPrice
        queryParams.value.maxPrice = maxPrice
        initGoodsList()
      }

      const handleCurrentChange = (val:number) => {
        queryParams.value.currentPage = val
        initGoodsList()
      }

      return {
        goNext,
        queryParams,
        goodsTotal,
        goodsData,
        initGoodsList,
        customLoading,
        categoryId,
        title,
        lastName,
        logoBarData,
        logoBarHandSearch,
        categoryHandleSearch,
        goodsHandleSearch,
        handleCurrentChange
      }
    }
  })
</script>

<style lang="scss" scoped>
  .space-category {
    width: 264px;
  }

  .slider-sign-notice {
    width: 232px;
  }

  .footer-line {
    height: 1px;
    background: #dbdbdb;
    margin: 0 3%;
  }
  .custom-container {
    min-height: 9.375rem;
  }
</style>
